﻿<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <title>Site BigRichards</title>
        <link rel="shortcut icon" href="imgs/favicon.ico" type="image/x-icon" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" />
        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon" />
        <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.jscrollpane.min.js" type="text/javascript"></script>
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
        <script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
    </head>

    <body>
        <div id="conteinerBody">
            <div id="boxes">
                <div id="sobre" class="window oculto" style="width: 759px; height: 387px; padding: 0px; margin-left: 0px; background-image: url('imgs/fundoSobre.png');">
                    <img src="imgs/textoSobre.png" style="margin-left: 117.5px; margin-top: 50.5px;"/>
                </div>

                <div id="downloads" class="window letraEscondida" style="height: 600px; width: 700px; padding: 0px;">
                    <div id="tituloDiscos">
                        <span>DOWNLOADS</span>
                    </div>
                    <div id="conteinerDiscos" class="scroll-pane">
                        <div id="Supernova" class="disco espacamentoDireita espacamentoInferior">
                            <div id="capaSupernova" class="capa">
                                <img src="imgs/downloads/capa_supernova.jpg" />
                            </div>
                            <div id="musicasSupernova" class="musicas">

                            </div>
                        </div>
                        <div id="MelhorVoce" class="disco espacamentoInferior">
                            <div id="capaMelhorVoce" class="capa">
                                <img src="imgs/downloads/capa_melhor.jpg" />
                            </div>
                            <div id="musicasMelhorVoce" class="musicas">

                            </div>
                        </div>
                        <div id="TantoFaz" class="disco espacamentoDireita espacamentoInferior">
                            <div id="capaTantoFaz" class="capa">
                                <img src="imgs/downloads/capa_tantofaz.jpg" />
                            </div>
                            <div id="musicasTantoFaz" class="musicas">

                            </div>
                        </div>
                        <div id="ContoAssim" class="disco espacamentoInferior">
                            <div id="capaContoAssim" class="capa">
                                <img src="imgs/downloads/capa_euconto.jpg" />
                            </div>
                            <div id="musicasContoAssim" class="musicas">

                            </div>
                        </div>
                    </div>
                </div>
                <div id="fotos" class="window oculto">
                    <p>fotos.</p>
                </div>
                <div id="videos" class="window oculto">
                    <p>videos.</p>
                </div>
                <div id="contato" class="window oculto">
                    <div id="formContato" class="centralizaDiv">
                        <p style="font-size: 30px;">Contato</p>
                        <br/>
                        <form method="post" action="#">
                            <label for="nome">Nome</label>
                            <input class="contato" type="text" id="nome" name="nome" />
                            <br/>
                            <br/>

                            <label for="email">Email</label>
                            <input class="contato" type="text" id="email" name="email" />
                            <br/>
                            <br/>

                            <label for="mensagem">Mensagem</label>
                            <br/>
                            <br/>
                            <textarea id="mensagem" name="mensagem"></textarea>
                            <br/>
                            <br/>

                            <input style="float: right;" type="submit" id="botaoEnviar" value="Enviar" />
                        </form>
                    </div>
                </div>
                <div id="mask"></div>
            </div>

            <div id="topo">
                <div id="menuTopo">
                    <img src="imgs/br_menu.png" style="float: left; margin-right: 30px; margin-top: 5px;"/>
                    <div id="links_menuTopo">
                        <a href="#" class="menuTopoLink">HOME</a>
                        |
                        <a href="#sobre" name="modal" class="menuTopoLink">SOBRE</a>
                        |
                        <a href="#downloads" name="modal" class="menuTopoLink">DOWNLOADS</a>
                        |
                        <a href="#fotos" name="modal" class="menuTopoLink">FOTOS</a>
                        |
                        <a href="#videos" name="modal" class="menuTopoLink">VÍDEOS</a>
                        |
                        <a href="#contato" name="modal" class="menuTopoLink">CONTATO</a>
                    </div>
                </div>
            </div>

            <div id="conteudoCorpo" class="centralizaDiv">
                <div id="fotoBanda" class="centralizaDiv espacamentoInferior">
                    <div id="fotoParte1" class="fotoBanda espacamentoDireita">
                        1a parte da foto
                    </div>

                    <div id="fotoParte2" class="fotoBanda espacamentoDireita">
                        2a parte da foto
                    </div>

                    <div id="fotoParte3" class="fotoBanda">
                        3a parte da foto
                    </div>
                </div>

                <div id="titulos" class="centralizaDiv espacamentoInferior">
                    <img src="imgs/home-flat.png" class="lettering"/>
                </div>

                <div id="playerLetras" class="centralizaDiv espacamentoInferior">
                    <div id="playerMusica" class="espacamentoDireita">
                        <iframe width="100%" height="330" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1625469&amp;auto_play=false&amp;show_artwork=true&amp;color=311112"></iframe>
                    </div>

                    <div id="letrasMusicas">
                        <div id="menuLetras">
                            <span>Letras</span>
                            <div id="divLetras_1">
                                <div id="numeroLetra_1" style="" class="numerosLetras cor1 corPadrao" onclick="mudarLetra(1)">
                                    1
                                </div>
                                <div id="numeroLetra_2" style="" class="numerosLetras cor2" onclick="mudarLetra(2)">
                                    2
                                </div>
                                <div id="numeroLetra_3" style="" class="numerosLetras cor1" onclick="mudarLetra(3)">
                                    3
                                </div>
                                <div id="numeroLetra_4" style="" class="numerosLetras cor2" onclick="mudarLetra(4)">
                                    4
                                </div>
                                <div  id="numeroLetra_5" style="" class="numerosLetras cor1" onclick="mudarLetra(5)">
                                    5
                                </div>
                                <div id="numeroLetra_6" style="" class="numerosLetras cor2" onclick="mudarLetra(6)">
                                    6
                                </div>
                                <div class="numerosLetras cor1" style="margin-right: 0px;" onclick="mudarDiv(2)">
                                    >>
                                </div>
                            </div>
                            <div id="divLetras_2" style="display: none;">
                                <div class="numerosLetras cor1" onclick="mudarDiv(1)">
                                    <<
                                </div>
                                <div id="numeroLetra_7" style="" class="numerosLetras cor2" onclick="mudarLetra(7)">
                                    7
                                </div>
                                <div id="numeroLetra_8" style="" class="numerosLetras cor1" onclick="mudarLetra(8)">
                                    8
                                </div>
                                <div id="numeroLetra_9" style="" class="numerosLetras cor2" onclick="mudarLetra(9)">
                                    9
                                </div>
                                <div id="numeroLetra_10" style="" class="numerosLetras cor1" onclick="mudarLetra(10)">
                                    10
                                </div>
                                <div id="numeroLetra_11" style="margin-right: 0px;" class="numerosLetras cor2" onclick="mudarLetra(11)">
                                    11
                                </div>
                            </div>
                        </div>

                        <div id="letras">
                            <div id="letra_1" class="letras scroll-pane">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat, mauris vel tristique bibendum, magna nibh malesuada sapien, eu sodales nulla eros nec tortor. Quisque ullamcorper accumsan vehicula. Fusce mauris lectus, elementum in condimentum a, pharetra a arcu. Cras velit massa, porttitor eget sollicitudin eu, laoreet in lectus. Integer sit amet libero molestie dolor tempus accumsan. Sed luctus lacus nunc, mollis scelerisque nisl. Ut et purus orci. Donec vulputate aliquet magna ut sagittis. Vestibulum eget metus turpis, eget fringilla nibh. Cras consequat sagittis luctus. Fusce venenatis urna non odio facilisis blandit.</p>
                                <br/>
                                <p>Aliquam vitae mi eu odio interdum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dolor diam, consectetur nec laoreet vel, pharetra nec nibh. Vivamus molestie augue nec risus porta rhoncus. Pellentesque rhoncus nisl et orci congue aliquet. Vivamus facilisis malesuada augue in adipiscing. Phasellus sagittis commodo libero. Proin varius nisl ac nisl condimentum congue elementum nulla dictum. Praesent dignissim lorem vitae odio fermentum ac ornare est aliquet.</p>
                                <br/>
                                <p>Nulla fermentum lobortis dolor id pulvinar. Proin lacus odio, egestas eget rhoncus sit amet, ultricies ac arcu. Nullam consequat ipsum eget enim laoreet pulvinar. Nunc posuere mollis lacus, eget elementum turpis pharetra in. Aenean tincidunt, elit ac fermentum dapibus, erat lectus vulputate augue, eget fermentum sapien neque id velit. Phasellus hendrerit arcu ut ligula sollicitudin malesuada. Aenean nec ante id eros molestie tempus nec nec nibh. Praesent in nisi sapien, a rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vel tortor orci. In felis ligula, rhoncus id eleifend eu, laoreet ut ipsum. Donec tincidunt libero vel turpis egestas scelerisque. Proin vitae nisl ac est ultrices mollis eu non urna. Duis id feugiat nisi. Ut turpis nulla, tempus quis semper id, ultrices sit amet augue. Maecenas cursus augue eu urna adipiscing porta.</p>
                                <br/>
                                <p>Proin ac purus vel augue rhoncus mattis a in felis. Mauris lobortis vulputate elit, a tempor eros eleifend ut. Nam ac libero est, ac suscipit sem. Sed orci enim, imperdiet sit amet elementum a, tincidunt dapibus augue. Praesent eu enim sed tellus elementum ornare. In porttitor sem nec magna pellentesque ultricies. Aenean id ligula quam, id fermentum nulla. Fusce orci ligula, porta et ultrices nec, tempus mattis elit. Nam quam arcu, posuere vel malesuada ut, ultricies sed magna. Morbi et libero pretium orci imperdiet tristique. Mauris in ipsum lectus, vitae tincidunt tellus. Sed sem tellus, tempus eu placerat eget, pretium a arcu. Donec in lorem quis dui accumsan faucibus. Nunc sit amet tortor vitae tellus bibendum dictum porta sit amet erat. Integer faucibus cursus luctus.</p>
                            </div>
                            <div id="letra_2" class="letras scroll-pane letraEscondida"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat, mauris vel tristique bibendum, magna nibh malesuada sapien, eu sodales nulla eros nec tortor. Quisque ullamcorper accumsan vehicula. Fusce mauris lectus, elementum in condimentum a, pharetra a arcu. Cras velit massa, porttitor eget sollicitudin eu, laoreet in lectus. Integer sit amet libero molestie dolor tempus accumsan. Sed luctus lacus nunc, mollis scelerisque nisl. Ut et purus orci. Donec vulputate aliquet magna ut sagittis. Vestibulum eget metus turpis, eget fringilla nibh. Cras consequat sagittis luctus. Fusce venenatis urna non odio facilisis blandit.</p>
                                <br/>
                                <p>Aliquam vitae mi eu odio interdum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dolor diam, consectetur nec laoreet vel, pharetra nec nibh. Vivamus molestie augue nec risus porta rhoncus. Pellentesque rhoncus nisl et orci congue aliquet. Vivamus facilisis malesuada augue in adipiscing. Phasellus sagittis commodo libero. Proin varius nisl ac nisl condimentum congue elementum nulla dictum. Praesent dignissim lorem vitae odio fermentum ac ornare est aliquet.</p>
                                <br/>
                                <p>Nulla fermentum lobortis dolor id pulvinar. Proin lacus odio, egestas eget rhoncus sit amet, ultricies ac arcu. Nullam consequat ipsum eget enim laoreet pulvinar. Nunc posuere mollis lacus, eget elementum turpis pharetra in. Aenean tincidunt, elit ac fermentum dapibus, erat lectus vulputate augue, eget fermentum sapien neque id velit. Phasellus hendrerit arcu ut ligula sollicitudin malesuada. Aenean nec ante id eros molestie tempus nec nec nibh. Praesent in nisi sapien, a rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vel tortor orci. In felis ligula, rhoncus id eleifend eu, laoreet ut ipsum. Donec tincidunt libero vel turpis egestas scelerisque. Proin vitae nisl ac est ultrices mollis eu non urna. Duis id feugiat nisi. Ut turpis nulla, tempus quis semper id, ultrices sit amet augue. Maecenas cursus augue eu urna adipiscing porta.</p>
                                <br/>
                                <p>Proin ac purus vel augue rhoncus mattis a in felis. Mauris lobortis vulputate elit, a tempor eros eleifend ut. Nam ac libero est, ac suscipit sem. Sed orci enim, imperdiet sit amet elementum a, tincidunt dapibus augue. Praesent eu enim sed tellus elementum ornare. In porttitor sem nec magna pellentesque ultricies. Aenean id ligula quam, id fermentum nulla. Fusce orci ligula, porta et ultrices nec, tempus mattis elit. Nam quam arcu, posuere vel malesuada ut, ultricies sed magna. Morbi et libero pretium orci imperdiet tristique. Mauris in ipsum lectus, vitae tincidunt tellus. Sed sem tellus, tempus eu placerat eget, pretium a arcu. Donec in lorem quis dui accumsan faucibus. Nunc sit amet tortor vitae tellus bibendum dictum porta sit amet erat. Integer faucibus cursus luctus.</p>
                            </div>
                            <div id="letra_3" class="letras scroll-pane letraEscondida">Letra 3</div>
                            <div id="letra_4" class="letras scroll-pane letraEscondida">Letra 4</div>
                            <div id="letra_5" class="letras scroll-pane letraEscondida">Letra 5</div>
                            <div id="letra_6" class="letras scroll-pane letraEscondida">Letra 6</div>
                            <div id="letra_7" class="letras scroll-pane letraEscondida">Letra 7</div>
                            <div id="letra_8" class="letras scroll-pane letraEscondida">Letra 8</div>
                            <div id="letra_9" class="letras scroll-pane letraEscondida">Letra 9</div>
                            <div id="letra_10" class="letras scroll-pane letraEscondida">Letra 10</div>
                            <div id="letra_11" class="letras scroll-pane letraEscondida">Letra 11</div>
                        </div>
                    </div>
                </div>

                <div id="menuInferior" class="centralizaDiv">
                    <div id="sobreMenuInf" class="menuInferior1 espacamentoDireita">
                        <a href="#sobre" name="modal"><img src="imgs/sobre.png" /></a>
                    </div>

                    <div id="downloadsMenuInf" class="menuInferior1 espacamentoDireita">
                        <a href="#downloads" name="modal"><img src="imgs/downloads.png" /></a>
                    </div>

                    <div id="fotosMenuInf" class="menuInferior1">
                        <a href="#fotos" name="modal"><img src="imgs/fotos.png" /></a>
                    </div>

                    <div id="videosMenuInf" class="espacamentoDireita">
                        <a href="http://www.youtube.com/bigrichardsrock" target="new"><img src="imgs/videos.png" /></a>
                    </div>

                    <div class="social espacamentoDireita">
                        <a href="https://www.facebook.com/bigrichards" target="new"><img src="imgs/facebook.png" /></a>
                    </div>

                    <div class="social espacamentoDireita">
                        <a href="http://twitter.com/#!/bigrichardsrock" target="new"><img src="imgs/twitter.png" /></a>
                    </div>

                    <div class="social espacamentoDireita">
                        <a href="http://www.flickr.com/photos/bigrichards" target="new"><img src="imgs/flickr.png" /></a>
                    </div>

                    <div class="social espacamentoDireita">
                        <a href="http://www.myspace.com/bigrichardsrules" target="new"><img src="imgs/myspace.png" /></a>
                    </div>

                    <div id="contato_social" class="social">
                        <a href="#contato" name="modal"><img src="imgs/contato.png" /></a>
                    </div>
                </div>
            </div>

            <div id="rodape">
                <div id="copyright" class="centralizaDiv">
                    <p>copyright big richards 2012</p>
                </div>
            </div>
        </div>
    </body>
</html>